<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        .mr{
            margin-right: 10px;
        }
        .active{
            color: #ccc;
            text-decoration: line-through;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 
        思路：分析对象      任务项目
                找共性      属性？任务名称，完成状态
        1.实现页面基本布局，根据数据渲染出来    --查询
        2.计算总数，未完成数
        3.实现“完成”    --删除
        4.实现添加      --增加
        5.实现编辑      --修改
    -->
    <div id="box">
        <h1>任务列表</h1>
        <p>任务总数{{ arr.length }};还有{{ getUnFinish() }}个未完成 【<a href="#" @click="finish()">完成</a>】</p>
        <ul>
            <li v-for="(item,index) in arr" :key="index"><input type="checkbox" v-model="item.isFinish"/>
               <span @click="edit(index)" v-show="!item.isEdit" :class="{active:item.isFinish}"> {{ item.title }}</span>
                <input type="text" v-model="item.title" v-show="item.isEdit" @blur="item.isEdit=false">
            </li>
        </ul>
        <p><input type="text" placeholder="请输入任务名称" v-model="msg" class="mr"><button @click="add()">添加</button></p>
    </div>

    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                arr:[
                    {title:'设计1',isFinish:false,isEdit:false},
                    {title:'设计2',isFinish:false,isEdit:false},
                    {title:'设计3',isFinish:false,isEdit:false}
                ],
                msg:"",
            },
            methods:{
                //计算未完成
                getUnFinish(){
                    var count=0;
                    this.arr.forEach(item=>{
                        if(!item.isFinish){
                            count++;
                        } 
                    })
                    return count;
                },
                finish(i){
                    //删除arr中的isFinish:true的数据  也就是已完成的数据
                    var newarr=this.arr;//新数组
                    this.arr=[];//清空
                    newarr.forEach(item=>{
                        //为false里新添加到arr里面去  没有完成的再重新添加到arr里面去
                        if(!item.isFinish){
                            this.arr.push(item)
                        }
                    })
                },
                add(){
                    this.arr.push( {title:this.msg,isFinish:false,isEdit:false})
                    this.msg=""
                },
                edit(index){
                    console.log(index);
                    if(this.arr[index].isFinish)return; //已完成的不执行
                    //点击时，修改当前的isEdit变为true，表示可以编辑
                    this.arr[index].isEdit=true;
                }
            }
        })
    </script>
</body>
</html>